<template>
  <ClientOnly>
    <div
      id="left_menu_teleport"
      class="full-action-sheet-teleport"
      :class="{ open_left_teleport: showLeftMenu }"
    ></div>
    <!-- 不能懒加载、不能销毁，不然从左边弹出的动画会失效 -->
    <van-action-sheet
      :show="showLeftMenu"
      :before-close="beforeClose"
      :lazy-render="false"
      teleport="#left_menu_teleport"
    >
      <div class="home_left_menu">
        <BackHeader :callBack="beforeClose">
          <template #right>
            <NuxtImg src="/images/home/head/logo-01.png" class="header-logo" />
          </template>
        </BackHeader>
        <User @close="beforeClose" />
        <Activity />
        <Footer />
      </div>
    </van-action-sheet>
  </ClientOnly>
</template>

<script setup lang="ts">
import User from "./User.vue";
import Activity from "./Activity.vue";
import Footer from "./Footer.vue";

const props = defineProps(["showLeftMenu"]);
const emits = defineEmits(["changeShowLeftMenu"]);
function beforeClose() {
  emits("changeShowLeftMenu", false);
}
const route = useRoute();
watch(
  () => route.name,
  () => {
    beforeClose();
  }
);

onMounted(() => {
  initCloseOver();
});
async function initCloseOver() {
  await nextTick();
  const overlay = document.querySelector(
    "#left_menu_teleport .van-action-sheet__content"
  );
  overlay?.addEventListener("click", (e) => {
    if (e.target === overlay) {
      beforeClose();
    }
  });
}
</script>

<style scoped lang="scss">
.home_left_menu {
  --menu-width: 7.94rem;
  height: 100vh;
  width: var(--menu-width);
  position: absolute;
  left: 0;
  top: 0;
  overflow-y: auto;
  background: var(--theme-color3);
  padding: 0rem 0.3rem 1rem;
  overflow-x: hidden;
  background-color: var(--app-bg-color);
  :deep(.header_back) {
    width: calc(var(--menu-width) - 0.6rem);
    position: static;
    left: 0;
    top: 0;
    transform: translateX(0);
    padding: 0;
    background-color: transparent !important;
    .backDiv {
      transform: translateX(-0.24rem);
    }
  }
}
.header-logo {
  height: 1rem;
  vertical-align: middle;
  transform: translateX(0.3rem);
}
</style>
